<template>
  <div>
    <div class="operate">
      <div>
        <label>当前版本：</label>
        <span class="font-green">{{ version[0].name }}</span>
      </div>
      <div>
        <label for>目标版本：</label>
        <el-select size="small" placeholder="版本" class="w120" v-model="activeVersion">
          <el-option
            v-for="(val, inx) in version"
            :key="inx"
            :label="val.name"
            :value="val.key"
            :disabled="val.name === version[0].name "
          ></el-option>
        </el-select>
      </div>
      <el-button type="primary" size="small" @click="copyList">复制</el-button>
    </div>
    <div class="list">
      <v-list
        ref="list"
        cards="1"
        :cols="cols"
        :hideTool="true"
        :dataList="dataList"
        v-if="!!dataList.length"
      >
        <template slot="head">
          <thead>
            <th>规格</th>
            <th>规格ID</th>
            <th>产品价格分类</th>
            <th>价格类型</th>
            <th>价格</th>
            <th>备注</th>
            <th>状态</th>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr>
            <td>
              <span>{{ props.item.type || '-' }}</span>
            </td>
            <td>
              <span>{{props.item.type_id || '-'}}</span>
            </td>
            <td>
              <span
                v-if="props.item.goods_price_type"
              >{{ props.item.goods_price_type | goodPriceType}}</span>
              <span v-else>-</span>
            </td>
            <td>
              <span v-if="props.item.price_type === 1">规格</span>
              <span v-if="props.item.price_type === 2">步长</span>
              <span v-if="!props.item.price_type">-</span>
            </td>
            <td>
              <span v-if="props.item.price" class="inflex">
                <span class="font-red">￥{{ (props.item.price/1000).toFixed(2) }}&nbsp;</span>
                元/
                <span v-if="props.item.goods_unit !== 'one'">{{ props.item.step }}</span>
                <span>{{ props.item.goods_unit | goodUnit}}/{{ props.item.price_unit | dateUnit }}</span>
              </span>
              <span v-else>-</span>
            </td>
            <td>
              <span>{{ props.item.remark || '-' }}</span>
            </td>
            <td>
              <span v-if="copyed[props.item.id]" class="font-green">已复制</span>
              <span v-else>未复制</span>
            </td>
          </tr>
        </template>
      </v-list>
    </div>
  </div>
</template>

<script>
export default {
  props: ["idArr", "data", "version"],
  watch: {
    idArr(val) {
      // console.log(val);
    },
    data(val) {
      if (!!val.length) {
        val.forEach((el, inx) => {
          this.$set(this.dataList, inx, el);
        });
      } else {
        this.dataList = [];
      }
    }
  },
  data() {
    return {
      cols: "80,120,0,0,0,0,80",
      dataList: [],
      copyed: {},
      activeVersion: ""
    };
  },
  methods: {
    copyList() {
      let i = 0;
      this.copyOperate(i, this.dataList);
    },
    copyOperate(i, data) {
      let params = JSON.parse(JSON.stringify(data[i]));
      params.goods_price_version = Number(this.activeVersion);
      delete params["id"];
      delete params["choose"];
      let itemId = data[i].id;
      i++;
      return new Promise((resolve, reject) => {
        this.$api.jpost("order.add_price", params).then(res => {
          if (res.status === 1) {
            // 用于复制状态显示
            this.$set(this.copyed, itemId, true);
            if (i < this.dataList.length) {
              this.copyOperate(i, data);
            } else {
              this.$success(res.msg);
            }
          }
        });
      });
    }
  },
  mounted() {
    this.dataList = this.data;
    this.activeVersion = this.version[1].key;
  }
};
</script>

<style lang="scss" scoped>
.operate {
  display: flex;
  align-items: center;
  padding: 0 0 20px 0;
  & > div {
    margin-right: 20px;
  }
}
</style>